React 18
前:React 17
March 29, 2022 React v18.0 – React Blog
concurrent rendering
Migration guide
https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
June 08, 2021 The Plan for React 18 – React Blog
batching
Automatic batching for fewer renders in React 18 · Discussion #21 · reactwg/react-18
state更新時の無駄な再描画を防ぐしくみ
複数の状態更新を1つのre-renderにまとめる
以前はReactのevent handlerのみバッチだったが、promiseとかsetTimeoutなどもサポートするようになった
createRootを使う必要がある
React 18#624738883f44250000419d8bを参照
startTransition API
ページのハングを防ぎたい
状態遷移中に視覚的フィードバックを提供する
遷移中にも応答できるようにする
実例:Real world example: adding startTransition for slow renders · Discussion #65 · reactwg/react-18
Suspence SSR
New Suspense SSR Architecture in React 18 · Discussion #37 · reactwg/react-18
問題
SSRをするためには手順を踏む必要がある
(サーバー)アプリで必要なデータをすべて取得
(サーバー) アプリをHTMLに描画してレスポンスを返す
(クライアント)すべてのアプリのためのJSをロード
(クライアント) JSのロジックとサーバで生成されたHTMLを接続する (これをhydrationという)
アプリの一部分が他より遅いと、これを効率的に実行できない
こうする
Suspenseを使うことでアプリをユニットに分割
ユニットはそれぞれ独立実行されるので、他のユニットをブロックしなくなる